import {
  CopyOutlined,
  DownloadOutlined,
  FileTextOutlined,
  PlusOutlined,
  ReloadOutlined,
  SendOutlined,
} from '@ant-design/icons';
import { Button, Divider, Input, List, Typography } from 'antd';
import React, { useState } from 'react';
import './index.less';

const { Title, Text } = Typography;
const { TextArea } = Input;

interface Message {
  id: string;
  type: 'user' | 'assistant';
  content: string;
  timestamp: Date;
  files?: string[];
}

interface Conversation {
  id: string;
  title: string;
  type: 'contract_litigation' | 'contract_organization';
  messages: Message[];
}

const AIAssistant: React.FC = () => {
  const [currentConversation, setCurrentConversation] = useState<string>('contract_litigation');
  const [inputValue, setInputValue] = useState<string>('');
  const [conversations, setConversations] = useState<Conversation[]>([
    {
      id: 'contract_litigation',
      title: '合同诉讼',
      type: 'contract_litigation',
      messages: [
        {
          id: '1',
          type: 'user',
          content: '合同二的诉讼阶段到哪一步了?',
          timestamp: new Date(),
        },
        {
          id: '2',
          type: 'assistant',
          content: '根据系统资料,合同二案件到诉讼立案前阶段',
          timestamp: new Date(),
        },
        {
          id: '3',
          type: 'user',
          content: '我还有有哪些资料还没填',
          timestamp: new Date(),
        },
        {
          id: '4',
          type: 'assistant',
          content: '你还有起诉状、授权所函、补充证据材料未填写',
          timestamp: new Date(),
        },
        {
          id: '5',
          type: 'user',
          content: '上周归档完成的案件资料',
          timestamp: new Date(),
        },
        {
          id: '6',
          type: 'assistant',
          content: '上周一共完成30个案件,其中20个房贷案件、10个信用卡案件,归档资料文件3个。',
          timestamp: new Date(),
          files: ['调解书.pdf', '裁定书.pdf', '裁决书.pdf'],
        },
      ],
    },
    {
      id: 'contract_organization',
      title: '合同资料整理',
      type: 'contract_organization',
      messages: [],
    },
  ]);

  const handleSendMessage = () => {
    if (!inputValue.trim()) return;

    const newMessage: Message = {
      id: Date.now().toString(),
      type: 'user',
      content: inputValue,
      timestamp: new Date(),
    };

    setConversations((prev) =>
      prev.map((conv) =>
        conv.id === currentConversation
          ? { ...conv, messages: [...conv.messages, newMessage] }
          : conv,
      ),
    );

    setInputValue('');
  };

  const handleNewChat = () => {
    // 创建新会话的逻辑
    console.log('创建新会话');
  };

  const currentConv = conversations.find((conv) => conv.id === currentConversation);

  return (
    <div className="ai-assistant-layout">
      <div className="ai-assistant-sider">
        <div className="sider-header">
          <Title level={4} className="sider-title">
            资料查询
          </Title>
        </div>

        <div className="sider-content">
          <Button
            type="primary"
            icon={<PlusOutlined />}
            block
            className="new-chat-btn"
            onClick={handleNewChat}
          >
            新建会话
          </Button>

          <Divider />

          <div className="chat-category">
            <Text strong className="category-title">
              聊天
            </Text>
            <List
              size="small"
              dataSource={conversations}
              renderItem={(conversation) => (
                <List.Item
                  className={`conversation-item ${
                    conversation.id === currentConversation ? 'active' : ''
                  }`}
                  onClick={() => setCurrentConversation(conversation.id)}
                >
                  <Text className="conversation-title">{conversation.title}</Text>
                </List.Item>
              )}
            />
          </div>
        </div>
      </div>

      <div className="ai-assistant-content">
        <div className="chat-container">
          <div className="messages-container">
            {currentConv?.messages.map((message) => (
              <div key={message.id} className={`message-wrapper ${message.type}`}>
                <div className="message-bubble">
                  <div className="message-content">{message.content}</div>

                  {message.files && (
                    <div className="message-files">
                      {message.files.map((file, index) => (
                        <div key={index} className="file-item">
                          <FileTextOutlined />
                          <span>{file}</span>
                        </div>
                      ))}
                    </div>
                  )}

                  <div className="message-actions">
                    <Button type="text" size="small" icon={<CopyOutlined />}>
                      复制
                    </Button>
                    <Button type="text" size="small" icon={<ReloadOutlined />}>
                      重新生成
                    </Button>
                    {message.files && (
                      <Button type="text" size="small" icon={<DownloadOutlined />}>
                        打包下载
                      </Button>
                    )}
                    {message.type === 'assistant' && message.content.includes('未填写') && (
                      <Button type="text" size="small">
                        填写&gt;
                      </Button>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="input-container">
            <div className="input-wrapper">
              <TextArea
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                placeholder="请输入内容"
                autoSize={{ minRows: 1, maxRows: 4 }}
                onPressEnter={(e) => {
                  if (!e.shiftKey) {
                    e.preventDefault();
                    handleSendMessage();
                  }
                }}
                className="message-input"
              />
              <Button
                type="primary"
                icon={<SendOutlined />}
                onClick={handleSendMessage}
                className="send-button"
                disabled={!inputValue.trim()}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AIAssistant;
